{/* LAYOUT模板 */}
<layout name="layout"/>
{/* LAYOUT模板 */}
{/* import Js,Css */}	
<css href="__THEMES__/css/common.css"/>
<css href="__CSS__/jquery-ui.css" />
<js href="__JS__/core/jquery-ui.1.10.4.js" />
<js href="__JS__/core/plugins.js" />
{/* import js,css */}



<!-- Skitter Styles -->
<link href="__PLUGS__/skitter/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="__PLUGS__/skitter/jquery.easing.1.3.js"></script>
<script type="text/javascript" language="javascript" src="__PLUGS__/skitter/jquery.skitter.min.js"></script>

<!-- Init Skitter -->
<script type="text/javascript" language="javascript">
	$(document).ready(function(){
		$('.box_skitter_large').skitter({show_randomly: true,label: false, numbers: false, theme: 'clean',interval: 4000,});
		$('.box_skitter_small').skitter({label: false, numbers: false, interval: 1000, theme: 'clean'});
		$('.box_skitter_medium').css({width: 500, height: 200}).skitter({show_randomly: true, dots: true, interval: 4000, numbers_align: 'center', theme: 'round'});
		$('.box_skitter_normal').skitter({animation: 'blind', interval: 2000, hideTools: true, theme: 'square'});
	});
</script>




<div class="" style="position:relative;">
	<!--产品一览表begin-->
	<div class="product_menu clearfix hide">
		<a id="prev" class="arrows" href="javascript:;" style="display: none;"></a>
		<a id="next" class="arrows" href="javascript:;" style="display: none;"></a>
		<div class="list_box clearfix">
			<ul id="recommand-goods-list" class="clearfix">				
				<volist name="recommend_goods_list" id="recommend_goods">					
				<li style="opacity: 1;">
					<div class="img">
						<a href="__URL__/item/id/{$recommend_goods.goods_id}" target="_blank">
							<img src="__UPLOAD__/images/{$recommend_goods.goods_img}" width="130px" height="130px" alt="{$recommend_goods.goods_name}" title="{$recommend_goods.goods_name}">
						</a>
					</div>
					<p>{$recommend_goods.goods_name}</p>
				</li>
				</volist>
			</ul>
		</div>
	</div>
	<!--产品一览表end-->
	
	
	<!--主打产品begin-->
	<div class="main-product-wrapper w_1200">
		<div class="banner clearfix">				
			<div class="box_skitter box_skitter_large" style="width:100%;height:476px;">
				<ul>
					<li>
						<a href="{:U('goods/item?id=40')}">
							<img src="__THEMES__/images/will_buy_mini.jpg" class="cubeRandom" />
						</a>
					</li>
				</ul>
			</div>
			<div class="item block_1">
				<div class="buy-wrapper">
					<div class="" style="width:450px;display:block;position:absolute;right:0px;bottom:270px;font-size:25px;color: #FFFFFF;">
						WIFI智能云音箱 ( 家庭云影音音箱 )
					</div>
					<div class="" style="width:200px;display:block;position:absolute;right:0px;bottom:200px;font-size:30px;">
						￥1499 元
					</div>
					<a class="fl" href="{:U('goods/yinxiang')}">
						查看详情>>
					</a>
					<a class="fl" style="margin-left:10px;" href="{:U('goods/item')}?id=40">
						立刻购买
					</a>
				</div>
			</div>
		</div>
	</div>
	<!--主打产品#end-->
	
	<!--推荐产品#begin-->
	<style>
		.row {margin:0px;}
		.row .col-lg-6{padding:0px;}
	</style>
	<div class="recommended-product w_1200">		
		<h2 class="recommend_commodities" style="font-weight:600;color:#03BEFF;">推荐产品</h2>		
		<div id="recommand-list">
			<div class="row recommand_list w_1200">
			  	<div class="col-md-6" style="padding:0px;">
				  	<div class="area">
						<div class="item block_4">
							<img class="lazy" data-original="__UPLOAD__/images/{$first_goods.goods_img}" src="" width="601px">
							<div class="mask" style="opacity:0.8;display:none;"></div>
							<div class="info" style="display: none;">
								<p class="title">
									{$first_goods.goods_name}
								</p>
								<p>
									精心制作的Mini wifi 音乐盒
								</p>
								<p class="price">
									￥{$first_goods.shop_price}
								</p>
								<a href="{:U('goods/item')}/id/{$first_goods.goods_id}" class="btn">
									立即购买
								</a>
							</div>
						</div>
					</div>
			  	</div>
			  	<div class="col-md-6" style="padding:0px;">
			  		<div class="area">
						<div class="item block_2">
							<img class="lazy" data-original="__UPLOAD__/images/{$second_goods.goods_thumb}" src="" width="220px"/>
							<div class="mask" style="opacity:0.8;display:none;"></div>
							<div class="info" style="display: none;">
								<p class="title">
									{$second_goods.goods_name}
								</p>
								<p>
									适用所有的电脑和手机
								</p>
								<p class="price">
									￥{$second_goods.shop_price}
								</p>
								<a href="{:U('goods/item')}?id={$second_goods.goods_id}" class="btn">
									立即购买
								</a>
							</div>
						</div>
						<div class="item block_1">
							<img class="lazy" data-original="__UPLOAD__/images/{$three_goods.goods_thumb}" src="" width="220px"/>
							<div class="mask" style="opacity:0.8;display:none;"></div>
							<div class="info" style="display: none;">
								<p class="title">
									{$three_goods.goods_name}
								</p>
								<p>
									经典入耳式设计，静享纯音悦
								</p>
								<p class="price">
									￥{$three_goods.shop_price}
								</p>
								<a href="{:U('goods/item')}/id/{$three_goods.goods_id}" class="btn">
									立即购买
								</a>
							</div>
						</div>
						<div class="item block_1">
							<img class="lazy" data-original="__UPLOAD__/images/{$forth_goods.goods_thumb}" src="" style="margin-top:10px;" width="230px"/>
							<div class="mask" style="opacity:0.8;display:none;"></div>
							<div class="info" style="display: none;">
								<p class="title">
									{$forth_goods.goods_name}
								</p>
								<p>
									适用家庭所有的电器插座
								</p>
								<p class="price">
									￥{$forth_goods.shop_price}
								</p>
								<a href="{:U('goods/item')}/id/{$forth_goods.goods_id}" class="btn">
									立即购买
								</a>
							</div>
						</div>
					</div>
			  	</div>
			</div>	
		</div>
				
		<style>
			.col-md-3{text-align:center;padding:0px;}
			.col-md-3 .item{display:block;width:100%;}
			.col-md-3 .item img{display:inline-block;margin-top:30px;}
		</style>
		<h2 class="recommend_commodities">大家都喜欢</h2>
		<div>			
			<div class="row w_1200"  style="border:1px solid #e1e2e2;">
				<volist name="recommend_goods_list" id="recommend_goods">
			  		<div class="col-md-3" style="border-left:1px solid #E0E0E0;">
				  		<div class="item block_3 "  style="height:497px;">
							<div>
				  				<br/>
								<p class="" style="font-size:22px;">{$recommend_goods.goods_name}</p>
								<br/>
				  			</div>
							<img class="lazy " data-orignal="__UPLOAD__/images/{$recommend_goods.goods_thumb}" width="259px" src="__UPLOAD__/images/{$recommend_goods.goods_thumb}" />
							<div>
								<br/>
								<br/>
								<div class="row" style="width:100%;">
									<div class="col-lg-6 text-right">
										<span style="line-height:30px;">
											已售出<b style="color:#00AEFF"> {$recommend_goods.sell_amount} </b>件
										</span>
									</div>
									<div class="col-lg-6">
										<a href="{:U('goods/item')}/id/{$recommend_goods.goods_id}" class="btn btn-danger" style="background:#03BEFF;color:#FFFFFF;border:none;">立刻了解>></a>
									</div>
								</div>
							</div>
				  		</div>
				  	</div>
			  	</volist>			  
			</div>				
		</div>
		<!--产品列表一end-->		
		<h2 class="recommend_commodities hide" style="color:#00B3FF;">用户最近购买的产品</h2>
		<div class="clearfix hide" style="border:1px solid #e1e2e2;">			
			<div class="row w_1200">
			  <div class="col-md-3">
			  	<div class="item block_3 clearfix"  style="height:259px;">
						<img class="lazy" data-orignal="__UPLOAD__/images/20150114/thumb_54b63f15a95b3.jpg" width="259px" src="__UPLOAD__/images/20150114/thumb_54b63f15a95b3.jpg" />
					</div>
			  </div>
			  <div class="col-md-3">
			  		<div class="item block_3  clearfix"  style="height:259px;">
						<img class="lazy" data-orignal="__UPLOAD__/images/20150114/thumb_54b63f15a95b3.jpg" width="259px" src="__UPLOAD__/images/20150114/thumb_54b63f15a95b3.jpg" />
					</div>
			  </div>
			  <div class="col-md-3">
			  		<div class="item block_3 clearfix"  style="height:259px;">
						<img class="lazy " data-orignal="__UPLOAD__/images/20150114/thumb_54b63f15a95b3.jpg" width="259px" src="__UPLOAD__/images/20150114/thumb_54b63f15a95b3.jpg" />
					</div>
			  </div>
			</div>				
		</div>
	</div>	
	<div style="width:100%;height:98px;"></div>
</div>




<script>
	/*鼠标移到产品产生的效果*/
	//$('#recommand-list').find('div.area').
	$('div.item').each(function(n){		
		var _this	=	$(this);
		$(this).hover(function(){
			//var mask	=	_this.find('div.mask').;
			//_this.find('div.mask').css('opacity','0.6'); 	/*遮罩层*/
			_this.find('div.mask').fadeIn(300); 	/*遮罩层*/
			_this.find('div.info').fadeIn(100);		/*产品信息:*/
		},function(){
			_this.find('div.info').fadeOut(100);	/*产品信息:*/
			_this.find('div.mask').fadeOut(300); 	/*遮罩层*/
		});
	});
</script>





<include file="Library:lib_lazyload"/>
<include file="Library:service"/>
<include file="Library:footer"/>



